<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <title>onmouseleave事件</title>
</head>
<body>

<button onmouseleave="onmouseleaveHandler()">htmlOnmouseleaveHandler</button>
<button onmouseleave="function onmouseleaveHandler(){
  alert('我是在html元素的onmouseleave属性写的函数代码'); // 但是不推荐这么写 因为这样不利于维护 易读性也不好
}
onmouseleaveHandler();
">htmlOnmouseleave</button>
<button id="jsOnmouseleave">jsOnmouseleave</button>
<button id="addEventListener">addEventListener</button>
  
<script>
// JQ点击事件的写法
/**
$(function(){
  $("button").mouseleave(function(){
   alert("JQ mouseleave 事件");
  });
});
**/

// 原生js有三种可以触发onmouseleave事件（所有HTML元素都支持onmouseleave事件）

// 第一种 在html中使用onmouseleave属性
function onmouseleaveHandler() {
  alert("我是调用onmouseleaveHandler方法哦");
}

//第二种 在javascript中，使用onmouseleave属性
document.getElementById("jsOnmouseleave").onmouseleave = function(){
  alert("我用的js中的onmouseleave属性写的");
};

// js属性不加on是错误的写法
document.getElementById("jsOnmouseleave").onmouseleave = function(){
  alert("我用的js中的onmouseleave属性写的");
};

//第三种 在javascipt中，使用addEvenListener()方法
document.getElementById("addEventListener").addEventListener("mouseleave",function(){
  alert("我是addEventListener()方法监听的mouseleave事件，这个方法是不需要加on");
});

// 这是加了on的写法 是错误的  不会发生任何事件触发
document.getElementById("addEventListener").addEventListener("mouseleave",function(){
  alert("我是addEventListener()方法监听的mouseleave事件，这个方法是不需要加on");
});
</script>

</body>
</html>